<template>

  <!--
    作者：luoyiming
    时间：2020-06-04
    描述：插件中心-直播-直播房间列表-修改
  -->
  <el-dialog title="添加小程序商品" :before-close="closeFunc" v-model="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" width="500px">
    <el-form size="small" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="商品名稱" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>

      <el-form-item label="商品封面圖" prop="coverImgId">
        <div>
          <el-button type="primary" @click="openUpload('cover')">上傳圖片</el-button>
          <img :src="coverImgPath" class="mt10" :width="120" v-if="ruleForm.coverImgId != ''" />
          <div class="gray9">建議尺寸300*300，大小不超過2M</div>
          <!--上传图片组件-->
          <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上傳圖片</Upload>
        </div>
      </el-form-item>

      <el-form-item label="價格類型" prop="type">
        <el-radio-group v-model="ruleForm.priceType">
          <el-radio :label="1">一口價</el-radio>
          <el-radio :label="2">價格區間</el-radio>
          <el-radio :label="3">折扣價</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="價格：" v-if="ruleForm.priceType == 1">
        <el-input type="text" min="0" v-model="ruleForm.price" class="mb16 max-w460" placeholder="請輸入價格"></el-input>
      </el-form-item>

      <el-form-item label="價格：" v-if="ruleForm.priceType == 2">
        <el-input type="text" min="0" v-model="ruleForm.price" class="mb16 max-w460" placeholder="請輸入最低價格" prop="price" :rules="[{  required: true,  message: '請輸入最低價格',  trigger: 'change'}]"></el-input>
        <el-input type="text" min="0" v-model="ruleForm.price2" class="mb16 max-w460" placeholder="請輸入最高價格" :rules="[{  required: true,  message: '請輸入最高價格',  trigger: 'change'}]"></el-input>
      </el-form-item>

      <el-form-item label="價格：" v-if="ruleForm.priceType == 3">
        <el-input type="textarea" min="0" v-model="ruleForm.price" class="mb16 max-w460" placeholder="請輸入原價" :rules="[{  required: true,  message: '請輸入原價',  trigger: 'change'}]"></el-input>
        <el-input type="textarea" min="0" v-model="ruleForm.price2" class="mb16 max-w460" placeholder="請輸入現價" :rules="[{  required: true,  message: '請輸入現價',  trigger: 'change'}]"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="openProduct()">綁定商品</el-button>
      </el-form-item>
      <el-form-item v-if="ruleForm.productId != ''">{{
        productName
      }}</el-form-item>
      <el-form-item>
        <img :src="productImgPath" class="mt10" :width="120" v-if="ruleForm.productImgId != ''" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" @click="closeFunc()">取 消</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">立即創建</el-button>
      </div>
    </template>

    <!--商品选择-->
    <Product :isproduct="isproduct" :excludeIds="exclude_ids" :islist="false" @closeDialog="closeProductFunc"></Product>
  </el-dialog>
</template>

<script>
import wxLiveApi from '@/api/wxlive.js';
import Upload from '@/components/file/Upload.vue';
import Product from '@/components/product/Product.vue';
export default {
  components: {
    /*图片上传*/
    Upload: Upload,
    /*选择商品*/
    Product: Product
  },
  data() {
    return {
      /*是否上传图片*/
      isupload: false,
      coverImgPath: '',
      shareImgPath: '',
      feedsImgPath: '',
      productImgPath: '',
      productName: '',
      ruleForm: {
        name: '',
        coverImgId: 0,
        priceType: 1,
        price: '',
        price2: '',
        productId: 0
      },
      rules: {
        name: [{
          required: true,
          message: "請輸入商品名稱",
          trigger: 'blur'
        }, {
          min: 3,
          max: 17,
          message: "長度在 3 到 17 個字符",
          trigger: 'blur'
        }],
        price: [{
          required: true,
          message: "請輸入價格",
          trigger: 'change'
        }]
      },
      /*是否加载完成*/
      loading: false,
      /*是否打开选择商品*/
      isproduct: false,
      /*已有的id*/
      exclude_ids: [],
      /*左边长度*/
      formLabelWidth: '120px',
      /*是否显示*/
      dialogVisible: false
    };
  },
  props: ['open', 'form'],
  watch: {
    open: function (n, o) {
      if (n != o) {
        this.dialogVisible = n;
      }
    }
  },
  created() {},
  methods: {
    closeFunc() {
      this.$emit('close');
    },
    submitForm(formName) {
      let self = this;
      self.$refs[formName].validate(valid => {
        if (valid) {
          let param = self.ruleForm;
          wxLiveApi.addProduct(param, true).then(data => {
            ElMessage({
              message: "創建成功",
              type: 'success'
            });
            this.dialogVisible = false;
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },
    /*关闭商品选择*/
    closeProductFunc(e) {
      console.log(e);
      this.ruleForm.productId = e.params.productId;
      this.productImgPath = e.params.imagePath;
      this.productName = e.params.productName;
      this.isproduct = false;
    },
    /*关闭弹窗*/
    cancelFunc(e) {
      this.$emit('close', {
        type: 'error'
      });
    },
    /*打开添加*/
    openProduct() {
      this.isproduct = true;
    },
    /*上传图片*/
    uploadFile(fileId) {
      let self = this;
      const loading = ElLoading.service({
        lock: true,
        text: "文件上傳中，請等待",
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      wxLiveApi.uploadFile({
        fileId
      }, err => {
        loading.close();
      }).then(response => {
        loading.close();
        ElMessage({
          message: "上傳文件至微信成功",
          type: 'success'
        });
      }).catch(response => {
        loading.close();
      });
    },
    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        this.coverImgPath = e[0].filePath;
        this.ruleForm.coverImgId = e[0].fileId;
        this.uploadFile(this.ruleForm.coverImgId);
      }
      this.isupload = false;
    }
  }
};
</script>

<style>
.img {
  margin-top: 10px;
}
</style>

